<template>
    <div id="home-hot">
        <HomePanel title="人气推荐" sub-title="人气爆款 低价出售">
            <template #main>
                <div>
                    <ul class="goods-list">
                        <li v-for="item in hotGoodsList" :key="item.id">
                            <RouterLink to="/">
                                <img  v-img-lazy="item.picture" />
                                <p class="name">{{ item.title }}</p>
                                <p class="price">{{ item.alt }}</p>
                            </RouterLink>
                        </li>
                    </ul>
                </div>
            </template>
        </HomePanel>
    </div>
</template>
    
<script setup >
import HomePanel from './HomePanel.vue'
import { onMounted, ref } from 'vue';
/* 请求标题数据 */
import { getHotGoodsAPI } from '@/apis/home';
const hotGoodsList = ref([])
const getGoods = async () => {
    const { data: res } = await getHotGoodsAPI()
    if (res.code != 1) new Promise.reject("获取失败")
    hotGoodsList.value = res.result
}
onMounted(() => getGoods())
</script>
    
<style scoped lang='scss'>
#home-hot {
    margin-top: 50px;

    .goods-list {
        display: flex;
        justify-content: space-between;
        height: 406px;

        li {
            width: 306px;
            height: 406px;

            background: #f0f9f4;
            transition: all .5s;

            &:hover {
                transform: translate3d(0, -3px, 0);
                box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
            }

            img {
                width: 306px;
                height: 306px;
            }

            p {
                font-size: 22px;
                padding-top: 12px;
                text-align: center;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            .price {
                color: $priceColor;
            }
        }
    }
}
</style>